<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      :inline="true"
    >
      <el-form-item label="省" prop="province">
        <el-input
          v-model="queryParams.province"
          placeholder="请输入省"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-input
          v-model="queryParams.city"
          placeholder="请输入城市"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select
          v-model="queryParams.gender"
          placeholder="请输入性别"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in gender"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 导出按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['system:tiktokuser:export']"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="tiktoklist">
      <el-table-column label="用户头像" align="center" key="avatar" width="150px"  :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <el-avatar shape="square" :size="70" fit="fill" :src="scope.row.avatar"></el-avatar>
        </template>
    </el-table-column>
      <el-table-column label="资料" prop="nickName" >
        <template slot-scope="scope">
          <span><svg-icon icon-class="tiktok_icon"/> {{scope.row.nickName}} </span>
          <span v-if="scope.row.gender == 0"><svg-icon icon-class="sex_man"/></span>
          <span v-if="scope.row.gender == 1"><svg-icon icon-class="sex_woman"/></span>
        </template>
      </el-table-column>
      <el-table-column label="地区">
        <template slot-scope="scope">
          <span>{{scope.row.country}} {{scope.row.province}} {{scope.row.city}}</span>
        </template>
      </el-table-column>

      <el-table-column label="会员等级" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.memberLevel == 1">普通会员</span>
          <span v-if="scope.row.memberLevel == 2">黄金会员</span>
          <span v-if="scope.row.memberLevel == 3">钻石会员</span>
          <span v-if="scope.row.memberLevel == 4"><svg-icon icon-class="vip4"/> 至尊会员</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0">正常</span>
          <span v-if="scope.row.state == 1">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="getDetail(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
<!-- 抖音用户详情列表 -->
    <el-dialog title="抖音用户数据详情"  :visible.sync="open" width="700px" append-to-body>
        <el-table ref="table" :data="detailList">
            <el-table-column label="用户id" prop="id"/>
            <el-table-column label="openid" prop="openId"/>
            <el-table-column label="通用unionid" prop="unionId"/>
        </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { tiktokList, tiktokDetail} from "@/api/tiktok/user";
import { downLoadExcel } from '@/utils/download'
export default {
  data() {
    return {
      //是否显示弹出层
      open: false,
      //详情信息表格
      detailList: [],
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //总条数
      total: 0,
      // 抖音用户列表格数据
      tiktoklist: [],
      // 状态数据字典
      statusOptions: [
        { dictLabel: "正常", dictValue: "0" },
        { dictLabel: "停用", dictValue: "1" },
      ],
      //性别状态
      gender: [
        { dictLabel: "男", dictValue: "0" },
        { dictLabel: "女", dictValue: "1" },
        { dictLabel: "未知", dictValue: "2" },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询抖音用户列表 */
    getList() {
      this.loading = true;
      tiktokList(this.queryParams).then((response) => {
        this.tiktoklist = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**查看用户详情 */
    getDetail(row) {
        this.detailList=[];
        const getid = row.id || this.ids;
        tiktokDetail(getid).then((response) => {
            this.detailList.push(response.data)
            this.open = true
        });

    },
    /** 导出按钮操作 */
    handleExport() {
      downLoadExcel("/system/tkUser/export", this.queryParams);
    },
  },
};
</script>

<style>
</style>
